I have a drag and drop table and when I want to drag an element from the top to bottom of the table I have to drag it to the "bottom area" of the table. But my problem is that the area where the scrolling starts is too small and i need to increase its size.

Here is a picture

You can see the orange area is the default area where the scrolling starts when you drag element to it. But i need the area to be bigger as shown in the picture (green color)

Is there some css property to achieve that? Or some JS/jQuery code to do that?